<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>报警处理记录
		</view>

		<view class="detail">
			<timeline>
				<timelineItem v-for="(item,index) in list" :key="index" :leftTime='showTime(item.handtime)'>
					<view class="tripItem">
						<view class="title" style="font-size: 18px;font-weight: bold;">{{item.uname}}</view>
						<view class="tips">{{item.content}}</view>
					</view>
				</timelineItem>
			</timeline>
			<!-- <u-time-line>
				<u-time-line-item nodeTop="2" class="alarm-status" v-for="(item,index) in list" :key="index">
					
					<template v-slot:node>
						<view class="u-node">
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view><b>{{item.uname}}</b><view class="fr date">{{item.handtime}}</view></view>
						<view class="step-info"><b>{{item.content}}</b></view>
					</template>
				</u-time-line-item>
			</u-time-line> -->
		</view>
	</view>
</template>

<script>
	import timeline from '../../components/chenbin-timeline/timeLine.vue'
	import timelineItem from '../../components/chenbin-timeline/timelineItem.vue'
	export default {
		components: {
			timeline,
			timelineItem
		},
		data() {

			return {
				id: '',
				list: []
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		created() {
			this.initList();
		},
		methods: {
			showTime(s){
				return s
			},
			back() {
				uni.navigateBack();
			},
			initList() {
				this.fetch('GET', this.baseUrl() + '/home/handleList', {
					id: '85778ad0-6311-11eb-9baf-6cb31126b644'
				}, true).then((res) => {
					if (res.returnCode == 1 && res.data != null) {
						this.list = res.data;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/ .timelineItem .timeItem .leftTime{
		width: auto !important;
	}
	.tripItem {
		height:140rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
		border-radius:10px;
		margin-bottom: 30rpx;
		.tips {
			font-size:22rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			margin-top: 20rpx;

		}
		.title {
			font-size:36px;
			font-weight:bold;
			color:rgba(51,51,51,1);
		}
	}
	.detail {
		margin-top: 20px;
		height: 88vh;
		padding: 20px;
		padding-left: 0;
	}

	.van-step--vertical {
		padding: 20px 10px;
	}

	.alarm-status {
		font-size: 16px;
		border-bottom: 1px solid #F1F1F1;
	}

	.alarm-status .date {
		color: rgba(62, 58, 57, 0.7);
		font-size: 14px;
	}

	.alarm-status .step-info {
		margin-top: 6px;
		font-size: 14px;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
</style>
